<template>
    <!--tab-->
    <div class="rotation-tab">
        <div></div>
        <ul>
            <li v-for="(item,index) in tablist" :key="index" v-on:mouseenter="drawer = true">{{item.name}}
                <span class="iconfont icon-xiangshang" v-if="index==0"></span>
            </li>
        </ul>
        <div class="tab-div" v-if="drawer" v-on:mouseleave="drawer = false">
            <div>
                <ul v-for="(item,index) in 5" :key="index">
                    <div>配饰</div>
                    <li>颈链钱包&小皮件</li>
                    <li>腰带</li>
                    <li>珠宝</li>
                    <li>腕表</li>
                    <li>眼镜</li>
                    <li>丝织品&围巾</li>
                    <li>帽子</li>
                    <li>短袜&连体裤</li>
                </ul>
            </div>
            <div><span>更多服装>></span></div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
             tablist:[
            {
                name:'男士',
            },
            {
                name:'女士',
            },
            {
                name:'周边',
            },
            {
                name:'其他',
            }],
            drawer: false,
            isshow: false,
        }
    },
    methods: {
        totop() {
            var timer = setInterval(()=>{
                document.documentElement.scrollTop = document.documentElement.scrollTop-50
                if(document.documentElement.scrollTop==0){
                    clearInterval(timer); 
                }
            },50)
        },
        showIcon() {
            // console.log(document.documentElement.scrollTop)
            if (!!document.documentElement.scrollTop && document.documentElement.scrollTop >= 684) {            
                this.isshow = true
            } else {
                this.isshow = false
            }
            if (!!document.documentElement.scrollTop && document.documentElement.scrollTop >= 7123) {            
                this.isshow = false
            } else {
                this.isshow = true
            }
        },
        toindex() {
            this.$router.push({
                path: '/'
            })
        },
    },
     mounted() {
        window.addEventListener("scroll", this.showIcon);
    },
}
</script>

<style lang='scss'>
.rotation-tab {
    width: 100%;
    z-index: 4;
    position: absolute;
    top: 0;
    left: 0;
    >div:nth-child(1) {
        width: 100%;
        height: 165px;
        background: #000;
    }
    >ul {
        width: 600px;
        overflow: hidden;
        position: absolute;
        margin-left: -246px;
        top: 78px;
        left: 50%;
        >li {
            float: left;
            font-size: 14px;
            color: #fff;
            line-height: 60px;
            padding: 0 20px;
            margin: 0 35px;
            cursor: pointer;
            position: relative;
            >span {
                font-size: 14px;
                position: absolute;
                bottom: -28px;
                left: 50%;
                margin-left: -7px;
            }
        }
    }
    >.tab-div {
        position: absolute;
        left: 0;
        top: 165px;
        background: #fff;
        width: 100%;
        height: 400px;
        
        >div:nth-child(1){
            display: flex;
            width: 839px;
            >ul {
                >div {
                    padding: 13px 0;
                    color: #101010;
                    font-size: 14px;
                    font-weight: 800;
                }
                >li {
                    font-size: 14px;
                    color: #101010;
                    line-height: 30px;
                }
            }
        }
        >div:nth-child(2) {
            width: 839px;
            font-size: 14px;
            color: #101010;
            font-weight: 600;
            padding: 15px 0 50px 0;
            >span {
                padding-left: 200px;
            }
        }
    }
}
</style>